import { useState, useRef, useCallback, memo, useMemo } from "react"
import { Button } from "antd"
export default function () {
    const [flag, setFlag] = useState(true)
    const [list, setList] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
    return (
        <>
            <div className="main_box">
                <h1>本案例展示 react中 条件渲染 和 列表渲染 的使用 </h1>
                <div className="main_row">
                    <p>条件渲染：根据条件渲染不同的组件或元素</p>
                    <p>
                        {flag ? <>条件为true，渲染这个</> : <>条件为false,渲染这个</>}
                        <Button type="primary" onClick={() => setFlag(!flag)}>
                            切换
                        </Button>
                    </p>
                </div>
                <div className="main_row">
                    <p>列表渲染：根据数组渲染多个组件或元素。列表渲染使用map,因为map返回新的数组,如果使用for或者forEach还需要单独用变量存储新dom数组，再渲染，多出一道步骤。</p>

                    <div>
                        {list.map((item, index) => (
                            <p key={item}>列表--{item}</p>
                        ))}
                    </div>
                </div>
            </div>
        </>
    )
}
